import React,{Component} from 'react';
import ReactEcharts from 'echarts-for-react';

class Goodscharts extends Component{
    
    getOption = () => {
       var option= {
            title: {
                    text: '物料订单流量统计',
                    subtext: '纯属虚构'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data:['最高气温','最低气温']
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: {readOnly: true},
                        magicType: {type: ['bar','line']},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis:  {
                    type: 'category',
                    boundaryGap: false,
                    data: ['一月','二月','三月','四月','五月','六月','七月']
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} k'
                    }
                },
                series: [
                    {
                        name:'最高销量',
                        type:'line',
                        data:[16, 23, 33, 18, 56, 41, 20],
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name:'最低销量',
                        type:'line',
                        data:[1, 2, 2, 5, 3, 2, 0],
                        markPoint: {
                            data: [
                                {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'},
                                [{
                                    symbol: 'none',
                                    x: '90%',
                                    yAxis: 'max'
                                }, {
                                    symbol: 'circle',
                                    label: {
                                        normal: {
                                            position: 'start',
                                            formatter: '最大值'
                                        }
                                    },
                                    type: 'max',
                                    name: '最高点'
                                }]
                            ]
                        }
                    }
                ]};
        return option;
    };
    render(){
        return(
            <div>
                <div style={{marginTop:20}}>
                    <ReactEcharts
                    option={this.getOption()}
                    style={{height: '500px', width: '60%'}}
                    />
                </div>
            </div>
        )
    }
}
export default Goodscharts;